<template>
  <a-transfer v-bind="$attrs" v-model:targetKeys="innerValue" :data-source="finalOptions" :loading="loading" :rowKey="(item) => item[keyField]" />
</template>

<script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'

// Props 定义接口
interface Props {
  value?: string[] // v-model:targetKeys 值
  api?: (_params?: any) => Promise<any> // 可选的远程加载函数
  params?: Record<string, any> // 请求参数
  options?: any[] // 静态 options 列表
  resultField?: string // 接口返回数据的列表字段
  keyField?: string // 唯一标识字段名（默认 key）
  immediate?: boolean // 是否挂载后立即加载
}

// 带默认值的 Props 定义
const props = withDefaults(defineProps<Props>(), {
  options: () => [], // 默认静态 options 空数组
  keyField: 'key', // 默认唯一 key 字段
  immediate: true // 默认挂载时立即加载
})

const emit = defineEmits(['update:value']) // v-model 更新事件

const loading = ref(false) // 是否加载中
const innerValue = ref(props.value || []) // 内部绑定的目标 key 列表
const dynamicOptions = ref<any[]>([]) // 动态加载 options 的数据源

// 计算最终使用的 options，静态优先，接口为备选
const finalOptions = computed(() => {
  return props.options?.length ? props.options : dynamicOptions.value
})

// 拉取远程数据
const fetchData = async () => {
  if (!props.api || props.options?.length) return // 如果有静态 options 则不请求
  loading.value = true
  try {
    const res = await props.api(props.params) // 调用 API
    const list = props.resultField ? res[props.resultField] || [] : res
    dynamicOptions.value = Array.isArray(list) ? list : [] // 确保为数组
  } catch (err) {
    console.error('ApiTransfer fetch error:', err) // 请求失败日志
  } finally {
    loading.value = false
  }
}

// 监听外部 v-model 值变化，更新内部值
watch(
  () => props.value,
  (val) => (innerValue.value = val || [])
)

// 监听内部值变化，向外触发 v-model 更新
watch(innerValue, (val) => emit('update:value', val))

// 监听请求参数变化，重新拉取数据
watch(() => props.params, fetchData, { deep: true })

// 挂载时判断是否立即加载远程数据
onMounted(() => {
  if (props.immediate && !props.options?.length) {
    fetchData()
  }
})
</script>
